<!DOCTYPE html PUBLIC>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>后台管理中心</title>
    <link rel="stylesheet" href="/admin/css/pintuer.css"/>
    <link rel="stylesheet" href="/admin/css/admin.css"/>
    <link href="/admin/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all"/>
    <script src="/admin/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/admin/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/admin/js/pintuer.js"></script>
    <script src="/public/js/vue.js"></script>
    <script src="/public/js/axios.js"></script>
    <script src="/public/js/axios-config.js"></script>
</head>
<body>
<div id="app">
    <!-- Modal -->
    <div class="modal modal-lg fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">{{curItem.name}}</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div v-show="type==0">{{curItem.info}}</div>
                    <div v-show="type==1">{{curItem.awardRecord}}</div>
                    <div v-show="type==2">
                        <img v-bind:src="curItem.avatar">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
<!--        模态框结束-->
    </div>
    <div class="panel admin-panel">
        <div class="panel-head"><strong class="icon-reorder"> 影人管理</strong></div>
        <div class="padding border-bottom">
            <ul class="search">
               <li>
                   <input @keyup.enter="loadData()" v-model="params.name" class="form-control" type="text"
                   placeholder="输入影人名字快速查找">
               </li>
                <li>
                    <button @click="loadData()" class="button border-blue">
                        <span class="icon-search"></span>查询
                    </button>
               </li>
                <li>
                    <a class="button border-green" href="/admin/maker/updateoradd.html"><span
                            class="icon-edit"></span> 添加</a>
                </li>
            </ul>
        </div>
        <table class="table table-hover text-center">
            <thead>
            <tr>
                <th>编号</th>
                <th>名字</th>
                <th>头像</th>
                <th>基本信息</th>
                <th>职业</th>
                <th>性别</th>
                <th>国籍</th>
                <th>获奖经历</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
                <!--在这里遍历列表显示记录-->
                <tr v-for="item in list">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name}}</td>
                    <td><img height="100" v-bind:src="item.avatar" alt="头像加载错误"
                    title="点击查看大图" data-bs-toggle="modal" data-bs-target="#exampleModal"> </td>
                    <td>
                      <div class="text-container">{{item.info}}</div>
                        <button @click="show(item,1)" class="btn btn-link btn-sm" data-bs-toggle="modal" data-bs-target="#exampleModal">显示全部</button>
                    </td>
                    <td>{{item.occupation}}</td>
                    <td>{{item.sex == 0?'男':'女'}}</td>
                    <td>{{item.nationality}}</td>
                    <td>
                       <div class="text-container"> {{item.awardRecord}}</div></td>
                    <td>
                        <a class="btn btn-sm btn-warning" :href="'updateoradd.html?id=' + item.id">修改</a>
                        <button  class="btn btn-sm btn-danger" @click="del(item.id)">删除</button>
                    </td>
                </tr>
                <tr>
                    <td colspan="3" align="center">
                        <nav aria-label="Page navigation ">
                            <ul class="pagination">
                                <li class="page-item" v-if="page.hasPreviousPage">
                                    <a class="page-link" href="#" @click="goto(page.prePage)">上一页</a>
                                </li>
                                <li :class="'page-item ' + (page.pageNum===item?'active':'')"
                                    v-for="item in page.navigatepageNums">
                                    <a class="page-link"  href="#" @click="goto(item)">{{ item }}</a>
                                </li>
                                <li class="page-item" v-if="page.hasNextPage">
                                    <a class="page-link" href="#" @click="goto(page.nextPage)">下一页</a>
                                </li>
                            </ul>
                        </nav>
                    </td>
                </tr>
            </tbody>

        </table>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        'el': '#app',
        'data': {
            list: [],
            page: {},
            curItem:{},
            type: null,
            params:{
                pageNum: 1,
                pageSize: 5,
                name: null
            }
        },
        'methods': {
            del(id){
                if(confirm('确定要删除吗？')){
                    let url = '/api/v1/maker/remove/'+id
                    axios.post(url)
                        .then(res =>{
                            if(res.code === 200){
                                alert(res.message)
                                this.loadData()
                            }

                        })
                }

            },
            show(item,type){
                this.type = type
                this.curItem = item
            },
            goto(pn) {
                this.params.pageNum = pn
                this.loadData()
            },
            loadData() {
                let url = 'api/v1/maker/page'
                axios.post(url,this.params)
                .then(res=>{
                    this.page = res.data
                    this.list = res.data.list
                })
            }
        },
        mounted() {
            // 手动调用分页查询的函数
            this.loadData()
        }
    })


</script>
</body>
</html>